<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>道路门牌系统</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>

    <!--css-->
    <link rel="stylesheet" href="/css/ydui.css?rev=@@hash"/>
    <link rel="stylesheet" href="/css/demo.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <style>
        .buzhoulist li {
            float: left;
            padding: 8px 10px;
            border: 1px solid #ddd;
            margin-left: 8px;
            border-radius: 4px;
            position: relative;
        }

        .buzhoulist li:hover {
            background: #43b0fc;
            border: 1px solid #43b0fc;
            color: #fff;
        }

        .buzhoulist li.active {
            /*    background: #43b0fc;*/
            border: 1px solid #43b0fc;
            /*	color: #fff;*/
        }

        .buzhoulist li.active::before {
            content: "";
            position: absolute;
            right: 0;
            bottom: 0;
            border: 10px solid #43b0fc;
            border-color: transparent #43b0fc #43b0fc transparent;
        }

        .buzhoulist li.active::after {
            content: "";
            position: absolute;
            right: 2px;
            bottom: 4px;
            display: inline-block;
            height: 4px;
            width: 8px;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
        }

        .fileimgbox span {
            padding: 0.24rem;
            display: inline-block;
            width: 100%;
        }

        .fileimgbox div {
            margin-bottom: 0.24rem;
            overflow: hidden;
        }

        .fileimgbox div img {
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 15px;
        }

        .fileimgbox input {
            background: #43b0fc;
            color: #fff;
            border: 0;
            padding: 12px;
            border-radius: 3px;
        }


    </style>
</head>
<body>
<section class="g-flexview">
    <header class="m-navbar"><a th:href="'/weihu/list/'+${taskId}" class="navbar-item"><i class="back-ico"></i></a>
        <div class="navbar-center"><span class="navbar-title">门牌更新维护</span></div>
    </header>
    <section class="g-scrollview">
        <div class="map-box">
            <!--百度地图容器-->
            <div style="height:250px;" id="dituContent"></div>
        </div>
        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-left">门牌地址：</div>
                <div class="cell-right">
                    <input type="text" class="cell-input" id="address" th:value="${doorPlate.getPlateName()}"/>
                </div>
            </div>
            <div class="cell-item">
                <div class="cell-left">门牌经度：</div>
                <div class="cell-right">
                    <input type="text" class="cell-input"
                           th:value="${doorPlate.getPointLng()}" id="lng" value="东经10、北纬60"/>
                </div>
                <div class="cell-left">门牌纬度：</div>
                <div class="cell-right">
                    <input type="text" class="cell-input"
                           th:value="${doorPlate.getPointLat()}" id="lat" value="东经10、北纬60"/>
                </div>
            </div>
        </div>
        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-left">维护人：</div>
                <div class="cell-right">
                    <input type="text" class="cell-input" id="anzhuangzheName" value="张小娴"/>
                </div>
            </div>
            <div class="cell-item">
                <div class="cell-left">维护时间：</div>
                <div class="cell-right">
                    <input type="text" class="cell-input" id="addTime"
                           th:value="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd')}"
                           value="2018-05-15 13:50:00"/>
                </div>
            </div>
        </div>


        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-left">处理步骤：</div>
                <div class="cell-right" id="xunjianExceptionStatus">
                    <ul class="buzhoulist">
                        <input type="hidden" id="weihuExceptionStatus">
                        <li class="active">需更新维护</li>
                        <li>注销</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="m-celltitle">上传现场安装完成照片：</div>

        <div class="m-cell fileimgbox">
            <span>
      <div id="fileList" class="uploader-list"></div>
      <input type="button" value="上传拍照" data-camare="paizhao"/>
                <input type="hidden" id="imgUrl">
      </span>
        </div>


        <div class="m-celltitle">备注：</div>
        <div class="m-cell">
            <div class="cell-item">
                <div class="cell-right">
                    <textarea class="cell-textarea" placeholder="请输入"></textarea>
                </div>
            </div>
        </div>
        <button type="button" class="btn-block btn-primary" id="submit">提交</button>
        <button type="button" class="btn-block btn-hollow">取消</button>

    </section>

    <script src="/js/jquery.min.js"></script>
    <!-- @***照片上传器***@-->
    <div style="display:none;">
        <input type="file" id="fileCamera" name="fileCamera" accept="image/*" capture="camera"/>
        <script type="text/javascript">
            //更新维护
            $('.buzhoulist li').click(function () {
                $(this).toggleClass('active'); // 添加当前元素的样式
                $(this).siblings().removeClass('active'); // 删除其他兄弟元素的样式
                $("#weihuExceptionStatus").val(this.innerHTML);
            });
            $(document).ready(function () {
                (function ($file) {
                    $("[data-camare]").each(function () {
                        $(this).on('click', function () {
                            var camare = $(this).data("camare");
                            $file.data("anchor", camare);
                            $file.click();
                        });
                    });
                    $file.on('change', function (e) {
                        if ($file.val() == "") {
                            return;
                        }

                        var formData = new FormData();
                        formData.append("file", this.files[0]);
                        $.ajax({
                            url: "/upload/photo",
                            type: 'POST',
                            dataType: "JSON",
                            data: formData,
                            processData: false,
                            contentType: false,
                            timeOut: 60000,
                            error: function () {
                                //$.mobile.hidePageLoadingMsg();
                                alert("上传材料失败");
                            },
                            beforeSend: function () {
                                //$.mobile.loadingMessageTextVisible = true;
                                //$.mobile.showPageLoadingMsg('a', "上传中");
                            },
                            complete: function (XMLHttpRequest, status) {
                                //$.mobile.hidePageLoadingMsg();
                                if (status == 'timeout') {
                                    alert("上传材料超时");
                                }
                            },
                            success: function (data) {
                                if (data.code != 0) {
                                    alert("上传材料失败");
                                } else {
                                    var $camare = $("[data-camare=\"" + $file.data('anchor') + "\"]").first();
                                    var $container = $($camare).parent('span');
                                    var $phone = $("<img src='" + data.data.url + "' />");
                                    $phone.on('click', function () {
                                        var ns = $(this).data('value').split('|');
                                        showPicture(ns[1], 0);
                                    });
                                    var $phonelist = $container.find('.uploader-list');
                                    $phonelist.append($phone);
                                    $("#imgUrl").val(data.data.url);
                                    //$container.find('.ui-li-count').text($phonelist.find('img').length);
                                }
                                $file.val('');
                                //$.mobile.hidePageLoadingMsg();
                            }
                        });
                    });
                })($file = $('#fileCamera'));
            });
        </script>
    </div>
</section>

<!--引用百度地图API-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=79ztjfis0XStrHNpEpezr2za3iQNbW9f"></script>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
        addPolyline();//向地图中添加线
    }

    //创建地图函数：
    function createMap() {
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(108.95346, 34.265725);//定义一个中心点坐标
        map.centerAndZoom(point, 17);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
        if (document.getElementById("lng").value != "" && document.getElementById("lat").value != "" && document.getElementById("lng").value != "&nbsp;" && document.getElementById("lat").value != "&nbsp;") {
            map.clearOverlays();
            var new_point = new BMap.Point(document.getElementById("lng").value, document.getElementById("lat").value);
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
        } else {
            map.clearOverlays();
            var new_point = new BMap.Point(108.95346, 34.265725);
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
            document.getElementById("lng").value = "108.95346";
            document.getElementById("lat").value = "34.265725";
        }
        //单击获取点击的经纬度
        map.addEventListener("click", function (e) {
            map.clearOverlays();
            var new_point = new BMap.Point(e.point.lng, e.point.lat);
            var marker = new BMap.Marker(new_point);  // 创建标注
            map.addOverlay(marker);              // 将标注添加到地图中
            map.panTo(new_point);
            document.getElementById("lng").value = e.point.lng;
            document.getElementById("lat").value = e.point.lat;

        });
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 0});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    //标注点数组
    var markerArr = [{
        title: "西安钟楼",
        content: "我的备注",
        point: "108.953378|34.265815",
        isOpen: 0,
        icon: {w: 23, h: 25, l: 46, t: 21, x: 9, lb: 12}
    }
    ];

    //创建marker
    function addMarker() {
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0, p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point, {icon: iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title, {"offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)});
            marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                borderColor: "#808080",
                color: "#333",
                cursor: "pointer"
            });

            (function () {
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click", function () {
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open", function () {
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close", function () {
                    _marker.getLabel().show();
                })
                label.addEventListener("click", function () {
                    _marker.openInfoWindow(_iw);
                })
                if (!!json.isOpen) {
                    label.hide();
                    _marker.openInfoWindow(_iw);
                }
            })()
        }
    }

    //创建InfoWindow
    function createInfoWindow(i) {
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
        return iw;
    }

    //创建一个Icon
    function createIcon(json) {
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w, json.h), {
            imageOffset: new BMap.Size(-json.l, -json.t),
            infoWindowOffset: new BMap.Size(json.lb + 5, 1),
            offset: new BMap.Size(json.x, json.h)
        })
        return icon;
    }

    //标注线数组
    var plPoints = [{
        style: "solid",
        weight: 4,
        color: "#f00",
        opacity: 0.6,
        points: ["108.946892|34.265636", "108.958265|34.265815", "108.958408|34.265845"]
    }
    ];

    //向地图中添加线函数
    function addPolyline() {
        for (var i = 0; i < plPoints.length; i++) {
            var json = plPoints[i];
            var points = [];
            for (var j = 0; j < json.points.length; j++) {
                var p1 = json.points[j].split("|")[0];
                var p2 = json.points[j].split("|")[1];
                points.push(new BMap.Point(p1, p2));
            }
            var line = new BMap.Polyline(points, {
                strokeStyle: json.style,
                strokeWeight: json.weight,
                strokeColor: json.color,
                strokeOpacity: json.opacity
            });
            map.addOverlay(line);
        }
    }

    initMap();//创建和初始化地图

    $("#submit").click(function () {
        console.log(window.location.pathname.split("/"));
        console.log($("#addTime").val());
        var taskId = window.location.pathname.split("/")[3];
        var doorPlateId = window.location.pathname.split("/")[4];
        console.log(taskId + "   " + doorPlateId);
        /**
         * 表单提交
         */
        $.ajax({
            type: 'POST',
            url: "/weihu/save",
            data: {
                "taskId": taskId,
                "doorPlateId": doorPlateId,
                "anzhuangzheName": $("#anzhuangzheName").val(),
                "lat": $("#lat").val(),
                "lng": $("#lng").val(),
                "imgUrl": $("#imgUrl").val(),
                "remark": $("#remark").val(),
                "weihuExceptionStatus": $("#weihuExceptionStatus").val(),
                "addTime": $("#addTime").val()

            },
            success: function (data) {
                console.log(data);
                if (data.code == 0) {
                    window.location.href = "/weihu/list/" + taskId;
                } else {
                    alert("提交失败" + data.message);
                }
            }

        })
    });
</script>

<!--js-->

<script src="/js/ydui.js"></script>
<script src="/js/ydui.flexible.js"></script>
</body>
</html>
